<template>
    <div>
        <Row type="flex" style="margin-bottom: 10px"  justify="start">
            <Button icon="md-add"  type="primary" @click="modalcode.addModalFlag=true">添加</Button>
        </Row>
        <Row type="flex" justify="center">
            <Table :loading="loading" border :columns="codeColums" :data="codeData">
                <template slot-scope="{ row }" slot="action">
                    <Button icon="md-build"  type="primary" size="small" @click="updateCode(row)" style="margin-right: 5px">修改</Button>
                    <Button icon="md-trash" type="error" @click="removeCode(row)" size="small" >删除</Button>
                </template>
            </Table>
            <Page style="margin-top:10px " :total="total" show-elevator />
        </Row>
        <addcodemodal
                :modalcode="modalcode"
                @changeAddModel="modalcode.addModalFlag=false">
        </addcodemodal>
        <updatecodemodal
                :modalcode="modalcode"
                @changeaddModel="modalcode.udpateModalFlag=false">
        </updatecodemodal>
    </div>
</template>
<script>
    import  addcodemodal from "@c/sys/code/addcodemodal"
    import  updatecodemodal from "@c/sys/code/updatecodemodal"
  export default {
      data(){
          return{
              loading:true,
              codeColums:[
                  {type: 'index',title: "序号", width: 70, align: 'center' },
                  {title:"字段名称",key:"codeName",sortable: true},
                  {title:"字段编号",key:"codeId",sortable: true},
                  {title:"字段类型",key:"codeType",sortable: true},
                  {
                      title: '操作',
                      slot: 'action',
                      width: 250,
                      align: 'center'
                  }
              ],
              codeData:[],
              total:0,
              modalcode:{
                  addModalFlag:false,
                  udpateModalFlag:false,
                  codedata:{}
              }

          }
      },
      methods:{
          /**
           * 获取全部的字典类型数据
           */
        getAllCode(){
            this.http.post("/code/getAllCode",this.qs.parse({})).then(res=>{
                if(res.data){
                    this.codeData = res.data.list
                    this.total = res.data.total
                }
            }).finally(res=>{
                this.loading = false
            })
        },
          /**
           * 点击更新按钮的时候
           * @param row
           */
        updateCode(row){
            this.modalcode.udpateModalFlag = true
            this.modalcode.codedata = row
        },
          /**
           * 删除行数据
           * @param row
           */
        removeCode(row){
            let that = this
            this.$Modal.confirm({
                title:"警告！！！",
                content:"是否要删除该行数据？",
                onOk(){
                    that.http.post("/code/removeCodeById",this.qs.stringify({id:row.coId})).then(res=>{
                        if(res.data){
                            that.getAllCode()
                            that.$Message.success("删除成功！！！")
                        }
                    })
                },
                onCancel(){
                    that.$Message.info("已取消删除")
                }
            })
        }
      },
      created() {
          this.getAllCode()
      },
      components:{
          addcodemodal,
          updatecodemodal
      }
  }
</script>

<style scoped>

</style>
